<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网络检测</title>

    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        .check_network {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            padding: 6px;
        }

        .btn {
            width: fit-content;
            padding: 6px;
            background-color: #439cfa;
            color: #fff;
            border-radius: 4px;
            margin-bottom: 10px;
        }

        .domain_name {
            width: 120px;
            display: inline-block;
            text-align: end;
            margin-right: 10px;
        }

        .loading_cls {
            display: none;
        }

        .fail {
            font-size: 20px;
            color: #f00;
            font-weight: bold;
            display: none;
        }

        .success {
            font-size: 20px;
            color: #008000;
            font-weight: bold;
            display: none;
        }
    </style>
</head>

<body>
    <div class="check_network">
        <div>
            <p>  <span class="btn" onclick="checkFn()"> 重新检测  </span> <span  >请截图发送给管理员</span> </p>
            <p> <span>检测结果：</span> <span id="currentTime">  </span> </p>
            <p> <span class="domain_name"> dgfcjy.dg.cn </span> <span id="pic_1_loading" class="loading_cls"> 正在尝试请求，请稍后。。。 </span> <span id="pic_1_fail" class="fail"> x </span> <span id="pic_1_success" class="success"> ✔ </span> </p>
            <p> <span class="domain_name"> dggezf.dg.cn </span> <span id="pic_2_loading" class="loading_cls"> 正在尝试请求，请稍后。。。 </span> <span id="pic_2_fail" class="fail"> x </span> <span id="pic_2_success" class="success"> ✔ </span> </p>
            <p> <span class="domain_name"> zjjgl.dg.cn </span> <span id="pic_3_loading" class="loading_cls"> 正在尝试请求，请稍后。。。 </span> <span id="pic_3_fail" class="fail"> x </span> <span id="pic_3_success" class="success"> ✔ </span> </p>
        </div>

        <iframe style="width: 100%; flex: 1;" src="https://ip.skk.moe/"  frameborder="0"></iframe>

    </div>

</body>
<script>
	document.addEventListener("DOMContentLoaded", function() {
	  checkFn();
	});
    function checkFn() {
        const T = new Date();
        const timeStamp = T.getTime();
        const currentTime = T.toLocaleString();
        //document.getElementById('timeStamp').innerHTML = timeStamp;
        document.getElementById('currentTime').innerHTML =timeStamp;// currentTime;

        document.getElementById("pic_1_fail").setAttribute('style', "display: none");
        document.getElementById("pic_1_success").setAttribute('style', "display: none");

        document.getElementById("pic_2_fail").setAttribute('style', "display: none");
        document.getElementById("pic_2_success").setAttribute('style', "display: none");

        document.getElementById("pic_3_fail").setAttribute('style', "display: none");
        document.getElementById("pic_3_success").setAttribute('style', "display: none");

        /*
            定义要检测的图片 URL
            https://dgfcjy.dg.cn/ibasem/web/Images/login/bg2.png?nownum=001  // 图1
            https://dggezf.dg.cn/zhfc/ibasem//web/Images/login/bg2.png?nownum=002 // 图2
            https://zjjgl.dg.cn/szgdxcx/mobile/favicon.ico?nownum=003 // 图3
        */
        const imageUrls = [
            {
                name: 'pic_1',
                url: 'https://dgfcjy.dg.cn/ibasem/web/Images/login/bg2.png?nownum=' + timeStamp
            },
            {
                name: 'pic_2',
                url: 'https://dggezf.dg.cn/zhfc/ibasem//web/Images/login/bg2.png?nownum=' + timeStamp
            },
            {
                name: 'pic_3',
                url: 'https://zjjgl.dg.cn/szgdxcx/mobile/favicon.ico?nownum=' + timeStamp
            }
        ];

        // 遍历图片 URL 并发送请求
        imageUrls.forEach(item => {
            document.getElementById(item.name + '_loading').setAttribute('style', 'display: inline-block');
            fetch(item.url, { method: 'HEAD', mode: 'no-cors' })
                .then(response => {
					console.log('response ====》',response);
					// 更新页面上的检测结果
					document.getElementById(item.name + '_success').setAttribute('style', 'display: inline-block');
                    document.getElementById(item.name + '_loading').setAttribute('style', 'display: none');

                    // if (response.ok) {
                    //     console.log(`${item.name} 请求成功`);
                    //     // 更新页面上的检测结果
                    //     document.getElementById(item.name + '_success').setAttribute('style', 'display: inline-block');
                    // } else {
                    //     console.log(`${item.name} 请求失败`);
                    //     document.getElementById(item.name + '_fail').setAttribute('style', 'display: inline-block');
                    // }
                })
                .catch(error => {
                    document.getElementById(item.name + '_loading').setAttribute('style', 'display: none');
                    document.getElementById(item.name + '_fail').setAttribute('style', 'display: inline-block');
                    console.log(`${item.name} 请求出错: ${error}`);
                });
        });
    }

</script>

</html>